<template>
  <div class="dong">
      <div class="box1">
        <div @click="fn1(0)">推荐音乐</div>
        <div @click="fn1(1)">热搜榜</div>
        <div @click="fn1(2)">搜索</div>
      </div>
      <div>

      </div>
      <keep-alive>
          <component :is="mine"></component>
      </keep-alive>
      <!-- <button @click="debounce_fn">测试防抖按钮</button> -->
  </div>
</template>

<script>
// @ is an alias to /src
import Tui from "../components/Tui.vue"
import Sou from "../components/Sou.vue"
import Rsou from "../components/Rsou.vue"


export default {
  name: "Home",
  data(){
    return{
    
      mine:"Tui",
      arrs:["Tui","Rsou","Sou"]
    }
  },
  methods:{
    fn1(index){
      this.mine = this.arrs[index]
    }
  },
 
  components: {
      Tui,
      Rsou,
      Sou,
  },
};
</script>
<style lang="less" scoped>
    .dong {
     
      .box1{
        display: flex;
        justify-content: space-around;
        height: 40px;
        line-height: 40px;
        width: 100%;
        border-bottom: 1px solid #ccc;
      }
    }
  
</style>
